var server = './';



var errorlen = 0;
var line = true;
if (1 == 2) {
  window.applicationCache.addEventListener('error', function () {
    if (line) {
      setTimeout(function () {
        window.applicationCache.update()
      }, 500 * errorlen)
      errorlen++;
    }
  }, false);
  window.addEventListener('online', function () {
    line = true;
    window.applicationCache.update();
  }, false);

  window.addEventListener('offline', function () {

    line = false;

  }, false);

  window.applicationCache.addEventListener('updateready', function (e) {

    var updateready = function () {
      //缓存更新完毕
      if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        //切换为最新缓存
        window.applicationCache.swapCache();
        window.location.reload();

      } else {
        setTimeout(function () {
          updateready()
        }, 1000)
      }
    }
    updateready()
  }, false);
}
var SetHash = function (hash) {
  window.location.hash = hash
};
var Ajax = function (db, Callback) {
  axios.post(db.url, db.data)
    .then(function (response) {
      
      Callback(response.data, null)
      console.log(response);
    })
    .catch(function (error) {
      Callback(null, error)
    });
}

Vue.prototype.SetHash = SetHash;
Vue.prototype.GetMenuHeight = function () {
  var menu = document.getElementById("topmenu");
  var height = 56;
  if (menu != null && menu.offsetHeight != 0) {
    height = menu.offsetHeight;
  }
  return height;
}
Vue.prototype.GetHeight = function (id, h) {
  var menu = document.getElementById(id);
  var height = h;
  if (menu != null && menu.offsetHeight != 0) {
    height = menu.offsetHeight;
  }
  height = height;
  return height;
}

var cf = {
  ShowMenu: function () {},
  ContentResize: function () {},
  SearchResize: function () {},
  CategoryResize: function () {},
  HomeResize: function () {}
};

var initVue = function (self, hash) {
  var Resize = function () {
    cf.ContentResize();
    cf.SearchResize();
    cf.CategoryResize();
    cf.HomeResize();
  }
  window.onorientationchange = window.onresize = function () {
    Resize();
  }
  window.addEventListener('hashchange', function (e) {
    if (window.location.hash != hash) {
      hash = window.location.hash;
     

      self.$router.push({ path: hash.replace("#", "")}).catch(data => {  })


      
      cf.ShowMenu(hash)
    }
  }, false);
  cf.ShowMenu(hash)
}
// Page
const Home = {
  watch: {
    '$route'(to, from) {
      let self = this;
      self.InitForm();
    }
  },
  template: '#Home',
  data() {
    return {
      refreshing: false,
      loading: false,
      pages: 1,
      Carousel: {
        width: 100,
        height: 200,
        hide: false,
        FormStyle: "",
        slide: 0,
        sliding: null,
        data: []
      },
      InfoFormStyle: "",
      List: {
        data: [],
        style: ""
      }
    }
  },
  computed: {

  },
  created() {
    let self = this;

    cf.HomeResize = function () {
      self.setOrientationParamet();
      setTimeout(function () {
        self.setOrientationParamet();
      }, 100)
    }
    self.addonscroll();
    self.setOrientationParamet();
    self.initdb()
  },
  methods: {
    addonscroll() {

      let self = this;
      if (self.$refs.container) {
        self.$refs.container.onscroll = function () {
          console.log()
          if (this.scrollTop > 1000) {


            self.Carousel.hide = false

            self.setOrientationParamet();

          } else {


            self.Carousel.hide = true

            self.setOrientationParamet();

          }
        }
      } else {
        setTimeout(function () {
          self.addonscroll()
        }, 100)
      }
    },
    opendb(Callback) {
      let self = this;
      self.pages++;
      new Ajax({
          url: server + '../',
          data: {
            type: 3,
            pages: self.pages
          }
        },
        function (db, error) {
          if (error == null) {
            var category = db.List;
            self.List.data = self.List.data.concat(category);
          }
          Callback();
        })
    },
    initdb() {
      let self = this;
      new Ajax({
          url: server + '../',
          data: {
            type: 4
          }
        },
        function (db, error) {
          if (error == null) {
            var Carousel = db.Carousel;
            var category = db.List;
            self.List.data = category;
            self.Carousel.data = Carousel;
          }
          self.InitForm();
        })
    },
    InitForm() {
      let self = this;
      self.mainFormClassName = "show"
      self.setOrientationParamet();

    },
    setOrientationParamet() {

      let self = this;
      let width = document.body.offsetWidth;

      let height = document.body.offsetHeight;

      self.Carousel.width = width;
      self.Carousel.height = width / 2;
      self.Carousel.hide = (height / 5 * 2 >= width / 2) ? true : false;

      let carousel_height = (width / 2);

      let TopMenuHeight = self.GetMenuHeight();
      if (self.Carousel.hide == false) {
        carousel_height = 0;
      }
      self.Carousel.FormStyle = 'margin-top:' + (self.Carousel.height - 500) / 2 + 'px;';
      self.InfoFormStyle = 'top:' + TopMenuHeight + "px;"
      self.List.style = 'height:' + (height - carousel_height - TopMenuHeight - 56) + "px;"
    },
    ShowInfo(elm, link) {
      this.SetHash(link)
    },
    refresh() {
      this.refreshing = true;
      window.applicationCache.update()
      //this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        console.log(123)
      }, 2000)
    },
    load() {
      let self = this;
      self.loading = true;
      self.opendb(function () {
        self.loading = false;
        console.log(1234)
      })
    }
  }
}
////
const Category = {
  watch: {
    '$route'(to, from) {
      let self = this;
      self.InitForm();
    }
  },
  template: '#Category',
  data() {
    return {
      InfoFormStyle: "",
      refreshing: false,
      loading: false,
      List: {
        data: []
      },
      pages: 0
    }
  },
  mounted: function () {
    console.log(111111111);
  },
  computed: {

  },
  created() {
    let self = this;
    self.InitForm();
    cf.CategoryResize = function () {
      self.setOrientationParamet();
      setTimeout(function () {
        self.setOrientationParamet();
      }, 100)
    }
  },
  methods: {
    opendb(Callback) {
      let self = this;
      self.pages++;
      new Ajax({
          url: server + '../category/',
          data: {
            id: self.$route.params.id,
            pages: self.pages
          }
        },
        function (db, error) {
          if (error == null && db.Table) {
            self.List.data = self.List.data.concat(db.Table);

          }
          Callback();
        })
    },
    InitForm() {
      let self = this;
      self.List.data = [];
      self.pages = 0;
      self.setOrientationParamet();
      self.load();
    },
    ShowInfo(elm, link) {
      this.SetHash(link)
    },
    setOrientationParamet() {

      let self = this;

      let height = document.body.offsetHeight;

      let TopMenuHeight = self.GetMenuHeight();

      self.InfoFormStyle = 'top:' + TopMenuHeight + "px;"
    },
    refresh() {
      this.refreshing = true;
      //this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        console.log(123)
      }, 2000)
    },
    load() {
      let self = this;
      self.loading = true;
      self.opendb(function () {
        self.loading = false;
        console.log(1234)
      })
    }
  }
}
/////
const Search = {
  watch: {
    '$route'(to, from) {
      let self = this;
      self.InitForm();
    }
  },
  template: '#Search',
  data() {
    return {
      refreshing: false,
      loading: false,
      pages: 0,
      value: '~',
      loading: true,
      InfoFormStyle: "",
      List: {
        data: [],
        style: ""
      }
    }
  },
  mounted: function () {
    console.log(111111111);
  },
  computed: {

  },
  created() {
    let self = this;
    self.InitForm();

    cf.SearchResize = function () {
      self.setOrientationParamet();
      setTimeout(function () {
        self.setOrientationParamet();
      }, 100)
    }
  },
  methods: {
    query() {
      let self = this;
      self.SetHash("#/Search/" + self.value)
    },
    opendb(Callback) {
      let self = this;
      self.pages++;
      self.loading = true;
      new Ajax({
          url: server + '../Search/',
          data: {
            value: self.value,
            pages: self.pages
          }
        },
        function (db, error) {
          if (error == null && db.Table) {
            self.List.data = self.List.data.concat(db.Table);
          }
          Callback()
        })
    },
    InitForm() {
      let self = this;

      self.setOrientationParamet();
      self.value = self.$route.params.value;
      self.pages = 0;
      self.List.data = [];
      self.load()
    },
    previous() {

      this.SetHash('#')
    },
    ShowInfo(elm, link) {
      this.SetHash(link)
    },
    setOrientationParamet() {

      let self = this;

      let height = document.body.offsetHeight;

      let TopMenuHeight = (document.body.offsetWidth >= 992 ? self.GetMenuHeight() : self.GetHeight('Searchappbar', 64));
      self.InfoFormStyle = 'top:' + TopMenuHeight + "px;"

      self.List.style = 'height:' + (height - TopMenuHeight - 56) + "px;"
    },
    refresh() {
      this.refreshing = true;
      //this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        console.log(123)
      }, 2000)
    },
    load() {
      let self = this;
      self.loading = true;
      self.opendb(function () {
        self.setOrientationParamet();
        self.loading = false;

        console.log(1234)
      })
    }
  }
}
/////
const Content = {

  watch: {
    '$route'(to, from) {
      let self = this;
      self.InitForm();
    }
  },
  template: '#Content',
  data() {
    return {
      width: 100,
      InfoFormStyle: "",
      loading: false,
      info: {
        "id": 1,
        "category_id": 1,
        "title": "",
        "icon": 1,
        "Content": "",
        "images": "",
        "CreationDate": "2018-05-04",
        "UpdatedDate": "2018-05-04",
        "CreationUser_id": 1,
        "flow": 5,
        "static": 3,
        "Carousel_id": 31,
        "Carousel": "",
        "Broadcast": "",
        "ContentType": 1,
        "iframe": "",
        "Coinkey": "",
        "CreationUserName": ""
      }
    }
  },
  computed: {

  },
  created() {
    let self = this;
    self.InitForm();
    cf.ContentResize = function () {
      self.setOrientationParamet();
      setTimeout(function () {
        self.setOrientationParamet();
      }, 100)
    }
  },
  methods: {
    opendb() {
      let self = this;

      self.setOrientationParamet();
      self.loading = true;
      new Ajax({
          url: server + '../content/',
          data: {
            category_id: self.$route.params.category,
            id: self.$route.params.id
          }
        },
        function (db, error) {
          if (error == null && db) {
            if (db.iframe != null || db.iframe != "") {
              db.video = './~/Service/Video/' + db.iframe + '/m3u8/';
              db.poster = './~/Service/Video/Images/' + db.iframe + '/auto/256/';
            }
            db.iframe = db.iframe.length > 6 ? db.iframe : false;

            if (db.images != null) {
              var ImageList = db.images.split(',');

              if (ImageList.length > 0 && ImageList[0] != "") {
                db.ImageList = ImageList;
              }
            }
            for (var key in db) {
              self.info[key] = db[key];
            }

            setTimeout(function () {

              self.loading = false;
            }, 2000)
            console.log(self.info)
          }
        })
    },
    InitForm() {
      let self = this;
      self.opendb();
    },
    ShowInfo(elm, link) {
      this.SetHash(link)
    },
    setOrientationParamet() {
      let self = this;
      let height = document.body.offsetHeight;

      let TopMenuHeight = self.GetMenuHeight();
      self.width = document.body.offsetWidth;
      self.InfoFormStyle = 'top:' + TopMenuHeight + "px;"

    }
  }
}


const routes = [{
  path: '/',
  component: Home,
}, {
  path: '/category/:id',
  component: Category,
}, {
  path: '/content/:category/:id',
  component: Content,
}, {
  path: '/search/:value',
  component: Search,
}]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})


///self.$router.push('./content/' + 1) 

router.afterEach((to, from, next) => {
  //next();
  console.log(to.path);
});
var TopMenu = {
  template: '#TopMenu',
  data() {
    return {
      ClassName: "hide",
      title: title,
      GetHome: false,
      value: '',
      Menus: [{
        "title": "首页",
        "id": "Home",
        "active": true
      }],
      loading: false,
      MsMenu: {
        right: false,
        width: 300,
        docked: false,
        Show: false
      }
    }
  },
  mounted() {

    /*
      document.body.addEventListener('touchmove', function (e) {
        e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
      }, {
        passive: false
      }) 
      // passive 参数不能省略，用来兼容ios和android
      */
  },
  created() {
    let self = this;
    cf.ShowMenu = self.SetActive;
    self.opendb();
  },
  methods: {
    Search() {
      let self = this;
      self.SetHash("#/Search/" + self.value)
    },
    opendb() {
      let self = this;
      self.loading = true;
      new Ajax({
          url: server + '../',
          data: {
            type: 5
          }
        },
        function (db, error) {
          if (error == null) {
            var category = db.Table;

            for (var i = 0; i < category.length; i++) {
              if (category[i].id == "Home") {
                category[i].link = "#/"
              } else {
                category[i].link = "#/category/" + category[i].id
              }
            }
            category.push({
              "title": "搜索",
              "link": "#Search/~"
            })
            self.Menus = category;
          }
          self.InitForm();
          setTimeout(function () {
            self.loading = false;
          }, 100)
        })
    },
    InitForm() {

      let self = this;
      self.ShowGetHome = function () {
        self.GetHome = true;
      }
      setTimeout(function () {
        self.ClassName = 'show';
      }, 1000)
    },
    ShowMsMenu() {
      this.MsMenu.Show = true;
    },
    SelectMenu(elm, name) {
      if (name == 'ms-menu') {
        this.MsMenu.Show = false;
      }
      this.SetHash(elm.link)
      this.SetActive(elm.link)
    },
    SetActive(hash) {

      let self = this;
      if (hash.indexOf("#/content") == 0) {
        self.GetHome = true;
        return;
      }
      self.GetHome = false;
      for (var i = 0; i < self.Menus.length; i++) {
        var link = self.Menus[i].link;
        if (link == hash || hash.replace('#/', '#') == link) {
          self.Menus[i].active = true;
        } else {
          self.Menus[i].active = false;
        }
      }
    },
    previous() {
      let self = this;
      self.GetHome = true;
      var Menus = self.Menus;
      for (var i = 0; i < Menus.length; i++) {
        if (Menus[i].active) {
          self.SetHash(Menus[i].link);
          return
        }
      }
    }
  }
}
var vm = new Vue({
  router,
  render: h => h(TopMenu)
}).$mount("#app")
setTimeout(function () {
  initVue(vm, window.location.hash)
}, 100)